<template>
  <div>
    <el-collapse
      v-if="element && element.key"
      v-model="element.componentProps.defaultActiveKey"
      :key="element.key"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <template v-for="(col, index) in element.items" :key="index">
        <el-collapse-item :title="col.name" :name="col.tabIndex">
          <div class="draggable-container" v-if="lowCode.isDesigner">
            <draggable
              class="drawing-board"
              v-model="col.items"
              @add="handleAdd($event, index)"
              v-bind="{ group: 'group', animation: 200 }"
              tag="div"
              item-key="key"
              handle=".mover"
              :component-data="{ name: 'fade' }"
            >
            <template #item="{ element:el, index }">
                <div>
                  <render-parse
                    :element="el"
                    :key="el.key"
                    :index="index"
                    :parent="col"
                    :fatherComponent="element"
                  >
                  </render-parse>
                </div>
              </template>
            </draggable>
          </div>
          <div v-else class="draggable-container">
            <template
              tag="div"
              v-for="(el, index) in col.items"
              :key="index"
            >
              <div v-if="el.key">
                <render-parse
                  :element="el"
                  :key="el.key"
                  :index="index"
                  :parent="col.items"
                  :fatherComponent="element"
                >
                </render-parse>
              </div>
            </template>
          </div>
        </el-collapse-item>
      </template>

      <!-- <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref, toRefs } from "vue";
import type { LowCodeImp, ComponentImp } from "@/components/low-code/core/type";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";
import { ElMessage, TabsPaneContext } from "element-plus";

export default defineComponent({
  name: "collapseWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);
    const component = lowCode.dataCenter[element.value.key] as ComponentImp;
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event);
    };

    const handleAdd = (event: { newIndex: number }, itemIndex: number) => {
      const newIndex = event.newIndex;
      let hasKey = false;
      if (element.value.items[itemIndex]) {
        /****
         * 组件预处理
         */
        if (
          useComponentPretreatment(
            lowCode,
            (element.value.items as any)[itemIndex],
            newIndex
          )
        )
          return false;
        hasKey = (element.value.items as any)[itemIndex]["items"][newIndex].key
          ? true
          : false;
        let cacheObject = component.copyItem(
          (element.value.items as any)[itemIndex]["items"][newIndex],
          false
        ) as ComponentImp;
        if (element.value.items[itemIndex]) {
          cacheObject.nestedChain = element.value.nestedChain + "_row";
          (element.value.items as any)[itemIndex]["items"][newIndex] =
            cacheObject;
          lowCode.setcurrentKey(cacheObject.key);
        }
      }
      hasKey && element.value.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    return {
      lowCode,
      element,
      handleAdd,
      handleClick,
    };
  },
});
</script>

<style scoped>
.drawing-board {
  min-height: 150px;
}
::v-deep .el-collapse-item__content {
  min-height: 200px !important;
  padding: 20px;
}
</style>
